<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script> 
    <script src="js/bootstrap.min.js"></script>
    <script src="js/vue.js"></script>
    <title>付费视频商城 | 首页</title>
    <link rel="stylesheet" href="css/comm.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="iconfont/iconfont.css">
</head>
<body>
<div id="app">
    <!--引入公共头部-->
    <div id="header"></div>

    <div class="b-index">
    <div class="container-fluid">
        <!--头部视频-->
        <div class="row no-gutters w-93 qfy-top ">
            <div class="col-8 qfy-video ">
                <video src="video/video02.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>
                <div class="video-detail">目前唯一可以自助建站的视频商城</div>
            </div>
            <div class="col-lg-4 col-md-12 pl-2">
                <div class="qfy-right">
                    <h4 class="header-title ">模板使用说明 <span class="header-subtitle">How to use</span></h4>
                    <p class="">亲，起飞页是入门门槛非常低的一款自建视频销售软件。
                        在购买太空版之后，系统会自动送您 <span> 1000元的启动视频销售额度。</span>
                        您仅需购买一些云视频空间和云视频流量，然后上传视频后就可以开始销售啦。
                        <span>空间、流量以及销售额度，</span>都是可以随时购买的。
                        如果购买的量越大，价格也就越便宜。
                    </p>
                </div>
            </div>
        </div>
        <!--头部视频结束-->
        <!--优质平台开始-->
        <div class="row no-gutters w-93 qfy-image-warpper qfy-b ">
           <div class="col-12 warpper-tb ">
               <p class="header-title">产品优势 <span class="header-subtitle">优质平台</span> </p>
           </div>
            <div class="col-12">
                <div v-for="item in icon">
                    <div class="col-lg-3 col-md-12 text-center float-left m-0 px-1 ">
                        <div class="bg-f4f4 py-3 px-2 border-icon">
                            <img :src="item.img" alt="">
                            <p class="p-1 m-0 font-15">{{item.title}}</p>
                            <p class="p-1 m-0 font-12">{{item.detail}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--优质平台结束-->
    </div>
 
    <!--油画推荐视频开始-->
    <div class="w-9 qfy-image-warpper">
            <div class="">
                <p class="header-title my-left course">油画课程 <span class="header-subtitle">推荐视频</span></p>
                <a href="">
                    <div class="button font-12 my-right">更多视频+</div>
                </a>
            </div>
        </div>
    <div class=" my-5 w-flxed">
            <div class="w-2" v-for="item in oil">
                <div class="" >
                <a href="details.html"><img :src="item.img" alt=""></a>    
                </div>
                <h5 class="font-13 py-2 m-0 text-d">
                    <a href="details.html">{{item.title}}</a>
                </h5>
                <p class="font-ff font-13 p-0 m-0">￥{{item.price}}</p>
                <p class="py-1 mb-4 m-0 font-12 font-9e hide-2">{{item.detail}}</p>
            </div>
        </div>
    <!--油画推荐视频结束-->

    <!--国画推荐视频开始-->
    <div class="w-9 qfy-image-warpper ">
            <div class="">
                <p class="header-title my-left course">油画课程 <span class="header-subtitle">推荐视频</span></p>
                <a href="">
                    <div class="button font-12 my-right">更多视频+</div>
                </a>
            </div>
        </div>
    <div class=" my-5 w-flxed">
            <div class="w-2" v-for="item in Chinese">
                <div class="" >
                    <a href="details.html"><img :src="item.img" alt=""></a>
                </div>
                <h5 class="font-13 py-2 m-0 text-d">
                    <a href="details.html">{{item.title}}</a>
                </h5>
                <p class="font-ff font-13 p-0 m-0">￥{{item.price}}</p>
            </div>
        </div>
    <!--国画推荐视频结束-->

    <!--引入公共底部-->
        <div id="footer"></div>
    </div>
</div>
</body>
<script>
    //使用ajax引入静态页面
    $(function(){
        $.ajax({
            url:"header.html",
            context:document.body,
             success: function(sView){
           $("#header").append($(sView));      
        }});
        $.ajax({
            url:"footer.html",
            context:document.body,
             success: function(sView){
           $("#footer").append($(sView));          
        }});
    })

    var vm = new Vue({
        el:'#app',
        data:{
            icon:[
                {img:'img/icon01.png',title:'随时开学，无需等待',detail:'任何时间，任何地点，想学就学。'},
                {img:'img/icon02.png',title:'1年365天，天天向上',detail:'终生有效，随时来学。'},
                {img:'img/icon03.png',title:'买一个课程，送一个课程',detail:'好学生不应该被教程所累，您想学，我们就送。'},
                {img:'img/icon04.png',title:'云视频技术',detail:'播放流畅，无广告纯净体验'}
            ],
            oil:[
                {img:'img/page01.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00',detail:'理论不再枯燥，基础也可以很有趣~ 为大家带来轻松学素描课程，让零基础入门不再乏味！ 就让我们抛开传统刻板的素描教学，跟着老师一起欢乐学素描。'},
                {img:'img/page02.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00',detail:'理论不再枯燥，基础也可以很有趣~ 为大家带来轻松学素描课程，让零基础入门不再乏味！ 就让我们抛开传统刻板的素描教学，跟着老师一起欢乐学素描。'},
                {img:'img/page03.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00',detail:'理论不再枯燥，基础也可以很有趣~ 为大家带来轻松学素描课程，让零基础入门不再乏味！ 就让我们抛开传统刻板的素描教学，跟着老师一起欢乐学素描。'},
                {img:'img/page04.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00',detail:'理论不再枯燥，基础也可以很有趣~ 为大家带来轻松学素描课程，让零基础入门不再乏味！ 就让我们抛开传统刻板的素描教学，跟着老师一起欢乐学素描。'},
                {img:'img/page05.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00',detail:'理论不再枯燥，基础也可以很有趣~ 为大家带来轻松学素描课程，让零基础入门不再乏味！ 就让我们抛开传统刻板的素描教学，跟着老师一起欢乐学素描。'},
                {img:'img/page06.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00',detail:'理论不再枯燥，基础也可以很有趣~ 为大家带来轻松学素描课程，让零基础入门不再乏味！ 就让我们抛开传统刻板的素描教学，跟着老师一起欢乐学素描。'},
                {img:'img/page07.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00',detail:'理论不再枯燥，基础也可以很有趣~ 为大家带来轻松学素描课程，让零基础入门不再乏味！ 就让我们抛开传统刻板的素描教学，跟着老师一起欢乐学素描。'},
                {img:'img/page08.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00',detail:'理论不再枯燥，基础也可以很有趣~ 为大家带来轻松学素描课程，让零基础入门不再乏味！ 就让我们抛开传统刻板的素描教学，跟着老师一起欢乐学素描。'},
                {img:'img/page09.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00',detail:'理论不再枯燥，基础也可以很有趣~ 为大家带来轻松学素描课程，让零基础入门不再乏味！ 就让我们抛开传统刻板的素描教学，跟着老师一起欢乐学素描。'},
                {img:'img/page10.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00',detail:'理论不再枯燥，基础也可以很有趣~ 为大家带来轻松学素描课程，让零基础入门不再乏味！ 就让我们抛开传统刻板的素描教学，跟着老师一起欢乐学素描。'}
            ],
            Chinese:[
              {img:'img/page01.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00'},
              {img:'img/page02.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00'},
              {img:'img/page03.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00'},
              {img:'img/page04.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00'},
              {img:'img/page05.jpg',title:'素描石膏几何体【试看+购买】',price:'400.00'}
            ],

        },
        mounted(){

        },
        methods:{

        }
    })
</script>
</html>